import {
  Component,
  ConfigItem,
  DescCompoundType,
  requireResource,
  resourcesList,
} from "../../../../../../component";
import { JH } from "../../../../test/run";
export class Footer
  implements Component<JQueryStatic, JH> {
  constructor() { }
  pack(): void { }
  getCss(): (
    | { type: "file"; path: string }
    | { type: "element"; selector: string }
  )[] {
    return [
      {
        type: "file",
        path: "res/css/index.css",
      }
    ];
  }
  getJs(): (
    | { type: "file"; path: string }
    | { type: "element"; selector: string }
  )[] {
    return [];
  }
  getName(): string {
    return "footer";
  }
  afterLoad($: JQueryStatic, dom: JH, resource: resourcesList[], domSelector: string): void {
    const list = Array.from(dom.find("img"))
    list.forEach((val, seq) => {
      const name = $(val).attr("src");

      const dest =
        resource.find((val) => val.after.name === domSelector + name)?.after
          .val

      dest &&
        // list[seq].setAttribute("src", dest);
        $(list[seq]).attr("src", dest)
    });
  }
  //, DescCompoundType<JQueryStatic, JQuery<HTMLElement>>
  config(
    configArr: ConfigItem<JQueryStatic, JH>[],
    resources: resourcesList[]
  ): void {
    configArr.push({
      domSelector: "DOMSELECTOR",
      desc: [
        {
          name: "修改图片",
          value: "",
          inputType: "resources",
          onchange($, ele, val, baseUrl) {
            ele
              .find(".myLogo")
              .attr("src", baseUrl + val[0]);
          },
        }
      ],
      trigger: ($: JQueryStatic, domSelector: string) => {
        return $(domSelector).find("img");
      },
    })
  }
  require(): requireResource {
    return {
      footerLogo: "./res/img/footerLogo.png",
      footerBg: "./res/img/footerBg.png"
    };
  }
}
